<template>
  <div class="p-5">
    <div class="">
      <a-spin :spinning="loading">
        <div class="page-header-index-wide page-header-wrapper-grid-content-main">
          <a-row :gutter="24">
            <a-col :md="24" :lg="7">
              <a-card :bordered="false">
                <!-- 详情 -->
                <div class="account-center-detail">
                  <div style="display: flex;align-items: center;">
                    <UserAddOutlined />：
                    <a-input v-if="datas.flag" v-model:value="datas.userInfo.userName" />
                    <span v-else>
                      {{ datas.userInfo.userName }}

                    </span>
                  </div>
                  <div style="display: flex;align-items: center;">
                    <SmileOutlined /> ：
                    <a-input v-if="datas.flag" v-model:value="datas.userInfo.name" />

                    <span v-else>
                      {{ datas.userInfo.name }}

                    </span>

                  </div>
                  <div style="display: flex;align-items: center;">
                    <WhatsAppOutlined /> ：

                    <a-input v-if="datas.flag" v-model:value="datas.userInfo.phoneNumber" />

                    <span v-else>
                      {{ datas.userInfo.phoneNumber }}

                    </span>

                  </div>
                  <div style="display: flex;justify-content: center;">
                    <a-button type="primary" @click="onSubmit" :loading="loading">
                      {{ datas.flag ? '确定' : '修改' }}
                    </a-button>

                  </div>

                </div>
              </a-card>
            </a-col>
            <a-col :md="24" :lg="17">
              <a-card style="width: 100%" :bordered="false">
                <changePass />
              </a-card>
            </a-col>
          </a-row>
        </div>
      </a-spin>
    </div>
  </div>

</template>

<script setup>
import changePass from './changePass.vue'
import { ref, reactive, onMounted } from 'vue'

// import UploadAvatar from './components/UploadAvatar.vue'

import { UserAddOutlined, SmileOutlined, IdcardOutlined, WhatsAppOutlined } from '@ant-design/icons-vue';
import * as api from '#/api/core/account';
import { message } from 'ant-design-vue';

const datas = reactive({
  flag: false,
  userInfo: {
    name: '',
    userName: '',
    phoneNumber: ''
  }
})

const loading = ref(false)
const info = async () => {
  try {

    let temp = await api.$desc()
    datas.userInfo = {
      ...temp
    }
    console.log('用户详情', temp)
  } catch { }
}
info()

const setavatar = async (url) => {
  userInfo.value.avatar = url
  loading.value = true
  const res = await api.updatePersonDetail({ id: userInfo.value.id, avatar: url })
  if (res) {
    createMessage.success(t('common.uploadSuccess'))
  }
  loading.value = false
}


const onSubmit = async () => {

  datas.flag = !datas.flag
  if (datas.flag) {
    return;
  }

  try {
    await api.$updateinfo({
      ...datas.userInfo,
      "email": "",
      "surname": "",
      "concurrencyStamp": ""
    })
    message.success('修改成功')
  } catch {

  }

}

</script>

<style lang="less" scoped>
.page-header-wrapper-grid-content-main {
  width: 100%;
  height: 100%;
  min-height: 100%;
  transition: 0.3s;

  .account-center-avatarHolder {
    text-align: center;
    margin-bottom: 24px;

    &>.avatar {
      margin: 0 auto;
      width: 104px;
      height: 104px;
      margin-bottom: 20px;
      border-radius: 50%;
      overflow: hidden;

      img {
        height: 100%;
        width: 100%;
      }
    }

    .username {
      color: rgba(0, 0, 0, 0.85);
      font-size: 20px;
      line-height: 28px;
      font-weight: 500;
      margin-bottom: 4px;
    }
  }

  .account-center-detail {
    div {
      margin: 10px 0;
    }

    p {
      margin-bottom: 8px;
      padding-left: 10px;
      position: relative;
    }

    i {
      // position: absolute;
      // height: 14px;
      // width: 14px;
      // left: 0;
      // top: 4px;
      padding-right: 5px;
      // background: url(https://gw.alipayobjects.com/zos/rmsportal/pBjWzVAHnOOtAUvZmZfy.svg);
    }

    .title {
      background-position: 0 0;
    }

    .group {
      background-position: 0 -22px;
    }

    .address {
      background-position: 0 -44px;
    }
  }

  .account-center-tags {
    .ant-tag {
      margin-bottom: 8px;
    }
  }

  .account-center-team {
    .members {
      a {
        display: block;
        margin: 12px 0;
        line-height: 24px;
        height: 24px;

        .member {
          font-size: 14px;
          color: rgba(0, 0, 0, 0.65);
          line-height: 24px;
          // max-width: 100px;
          vertical-align: top;
          margin-left: 12px;
          transition: all 0.3s;
          display: inline-block;
        }

        &:hover {
          span {
            color: #1890ff;
          }
        }
      }
    }
  }

  .tagsTitle,
  .teamTitle {
    font-weight: 500;
    color: rgba(0, 0, 0, 0.85);
    margin-bottom: 12px;
  }
}

.avatar-upload-wrapper {
  height: 200px;
  width: 100%;
}

.ant-upload-preview {
  position: relative;
  margin: 0 auto 10px auto;
  width: 100%;
  max-width: 130px;
  border-radius: 50%;
  box-shadow: 0 0 4px #ccc;

  .upload-icon {
    position: absolute;
    top: 0;
    right: 10px;
    font-size: 1.4rem;
    padding: 0.5rem;
    background: rgba(222, 221, 221, 0.7);
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.2);
  }

  .mask {
    opacity: 0;
    position: absolute;
    background: rgba(0, 0, 0, 0.4);
    cursor: pointer;
    transition: opacity 0.4s;

    &:hover {
      opacity: 1;
    }

    i {
      font-size: 2rem;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -1rem;
      margin-top: -1rem;
      color: #d6d6d6;
    }
  }

  img,
  .mask {
    width: 100%;
    max-width: 180px;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
  }
}
</style>
